<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
// let handler = null, drawDataSource = new Cesium.CustomDataSource('draw-data-source');
import LineDrawTool from '@/lib/LineDrawTool.js'
export default {
    name: 'Draw',
    components: {},
    data() {
        return {
            drawedEntities: [],
            lineDrawTool: null
        }
    },
    mounted() {
        this.initViewer()
        this.lineDrawTool =new LineDrawTool(window.viewer)
        this.lineDrawTool.active()
        // window.viewer.dataSources.add(drawDataSource)
        // window.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        //     Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
        // );
        // handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);
        // this.initDrawLine()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
                    enablePickFeatures: false
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;
        },
        // initDrawLine() {
        //     let that = this
        //     let linePositions = []
        //     //鼠标左击事件监听
        //     handler.setInputAction(function (event) {
        //         const ray = window.viewer.camera.getPickRay(event.position);
        //         const earthPosition = window.viewer.scene.globe.pick(ray, window.viewer.scene);
        //         if (Cesium.defined(earthPosition)) {
        //             // if (linePositions.length > 1) {
        //             //     that.removeEntityByIds(that.drawingIds)
        //             //     that.drawingIds = []
        //             //     that.createPolyline(linePositions)
        //             // }
        //             linePositions.push(earthPosition)
        //             that.createPoint(earthPosition);
        //         }
        //     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        //     //鼠标移动事件监听
        //     // handler.setInputAction(function (event) {
        //     //     const ray = window.viewer.camera.getPickRay(event.endPosition);
        //     //     const newPosition = window.viewer.scene.globe.pick(ray, window.viewer.scene);
        //     //     if (Cesium.defined(newPosition) && polylineEntity) {
        //     //         let positions = polylineEntity.polyline.positions.getValue()
        //     //         if (positions.length > 1) {
        //     //             polylineEntity.polyline.positions.getValue().pop();
        //     //         }
        //     //         polylineEntity.polyline.positions.getValue().push(newPosition);
        //     //     }
        //     // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        //     // //鼠标左键双击事件监听
        //     // handler.setInputAction(function () {
        //     //     handler = handler && handler.destroy();
        //     // }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        // },
        // createPoint(worldPosition) {
        //     let entity = drawDataSource.entities.add({
        //         position: worldPosition,
        //         point: {
        //             color: Cesium.Color.RED,
        //             pixelSize: 5,
        //             heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        //         },
        //     });
        //     this.drawingIds.push(entity.id)
        // },
        // createPolyline(worldPositions) {
        //     let entity = drawDataSource.entities.add({
        //         polyline: {
        //             positions: worldPositions,
        //             clampToGround: true,
        //             width: 3,
        //         },
        //     })
        //     this.drawingIds.push(entity.id)
        // },
        // removeEntityByIds(ids) {
        //     ids.forEach(id => {
        //         drawDataSource.entities.removeById(id)
        //     })
        // }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  